<div class="bs-docs-section">

  <div class="page-header">
    <h1 id="navbars">Navbar <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js" target="_blank">navbar.js</a>
    </h1>
    <code>mgcrea.ngStrap.navbar</code>
  </div>


  <h2 id="navbars-examples">Examples</h2>
  <p>Add quick, dynamic navbar functionality to transition through active/inactive states.</p>

  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="navbar/docs/navbar.demo.html" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip></a></h3>
  <pre class="bs-example-scope">$location.path() = "{{$location.path()}}";</pre>
  <div class="bs-example" append-source>
    <div class="navbar navbar-default" role="navigation" bs-navbar>
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <ul class="nav navbar-nav">
        <li data-match-route="/?(navbar)?"><a href="#/">Home</a></li>
        <li data-match-route="/page-one"><a href="#/page-one">Page One</a></li>
        <li data-match-route="/page-two.*"><a href="#/page-two/sub-a">Page Two</a></li>
      </ul>
    </div>
  </div>

  <h2 id="navbars-usage">Usage</h2>
  <p>Append a <code>bs-navbar</code>attribute to any element to activate the directive.</p>
  <p>Use <code>data-match-route</code> attributes to any children navigation item that should be toggled active.</p>
  <div class="callout callout-info">
    <h4>Heads up!</h4>
    <p>The directives also supports <code>HTML5 mode</code>, you just have to drop the <code>href</code> dashes.</p>
  </div>


  <h3>Options</h3>
  <p>Options can be passed via data attributes, append the option name to <code>data-</code>, as in <code>data-route-attr=""</code>.</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 100px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>activeClass</td>
          <td>string</td>
          <td>active</td>
          <td>Class to apply when the navigation item is active</td>
        </tr>
        <tr>
          <td>routeAttr</td>
          <td>string</td>
          <td>data-match-route</td>
          <td>Attribute to test against <code>$location.path()</code></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$navbarProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($navbarProvider) {
            angular.extend($navbarProvider.defaults, {
              activeClass: 'in'
            });
          })
        </code>
      </pre>
    </div>
  </div>

</div>

